<template>
  <el-form ref="formRef" label-width="100px" style="maxwidth: 480px" :model="formData" :rules="rules">
    <el-form-item label="用户昵称" prop="nickName">
      <el-input v-model="formData.nickName" placeholder="请输入用户昵称" />
    </el-form-item>
    <el-form-item label="归属部门">
      <CompTreeSelect
        :tree-data="departmentTreeData"
        :default-checked-keys.sync="checkedDepartmentId"
        :default-checked-labels="checkedDepartmentName"
      />
    </el-form-item>
    <el-form-item label="手机号码">
      <el-input v-model="formData.phonenumber" placeholder="请输入手机号码" />
    </el-form-item>
    <el-form-item label="用户名称" prop="userName">
      <el-input v-model="formData.userName" placeholder="请输入用户名称" />
    </el-form-item>
    <el-form-item label="用户密码" prop="password">
      <el-input v-model="formData.password" placeholder="请输入用户密码" />
    </el-form-item>
    <el-form-item label="状态">
      <el-radio v-model="formData.status" label="0">正常</el-radio>
      <el-radio v-model="formData.status" label="1">停用</el-radio>
    </el-form-item>
  </el-form>
</template>

<script>
import CompTreeSelect from '@/common/components/treeSelect/index.vue';

export default {
  components: {
    CompTreeSelect,
  },
  props: {
    currentData: {
      type: Object,
      default() {
        return {
          status: '0',
        };
      },
    },
    departmentTreeData: {
      type: Array,
      default() {
        return [];
      },
    },
    operateType: {
      type: String,
      default: 'add',
    },
  },
  data() {
    return {
      formData: {
        nickName: '',
        dept: '',
        phonenumber: '',
        userName: '',
        password: '',
        status: '0',
      },
      checkedDepartmentId: [],
      checkedDepartmentName: [],
    };
  },
  computed: {
    rules() {
      return {
        nickName: [
          { required: true, message: '请输入用户昵称', },
        ],
        userName: [
          { required: true, message: '请输入用户名称', },
        ],
        password: [
          { required: this.operateType === 'add', message: '请输入用户密码', },
        ],
      };
    },
  },
  watch: {
    currentData: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          const { dept, ...rest } = newVal;
          if (dept) {
            this.checkedDepartmentId = [
              dept.deptId,
            ];
            this.checkedDepartmentName = [
              dept.deptName,
            ];
          } else {
            this.checkedDepartmentId = [];
            this.checkedDepartmentName = [];
          }
          const data = { ...rest, };
          this.formData = data;
          this.$nextTick(() => {
            this.$refs.formRef.clearValidate();
          });
        }
      },
    },
  },
  methods: {
    reset() {
      this.formData = {};
      this.checkedDepartmentId = [];
      this.checkedDepartmentName = [];
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
    },
    validate() {
      const result = {};
      this.$refs.formRef.validate(valid => {
        result.valid = valid;
        if (valid) {
          const data = { ...this.formData, };
          if (this.checkedDepartmentId && this.checkedDepartmentId.length) {
            data.deptIdList = this.checkedDepartmentId;
          }
          result.data = data;
        }
      });
      return result;
    },
  },
};
</script>
